<template>
  <div class="container">
    <!-- Hero Section -->
    <section class="hero">
      <div class="hero-content">
        <h1>{{ project.name }}</h1>
<!--        <p class="description">{{ project.description }}</p>-->
        <a href="#overview" class="cta-button">立即使用</a>
      </div>
    </section>

    <!-- Features Section -->
    <section class="features">
      <h2>系统特点</h2>
      <div class="feature-cards">
        <div class="feature-card" v-for="(feature, index) in features" :key="index">
          <p>{{ feature }}</p>
        </div>
      </div>
    </section>

    <!-- Requirements Section -->
    <section class="requirements">
      <h2>系统要求</h2>
      <ul>
        <li v-for="(requirement, index) in systemRequirements" :key="index">{{ requirement }}</li>
      </ul>
    </section>

    <!-- Installation Section -->
    <section id="installation" class="installation">
      <h2>安装与部署</h2>
      <pre><code>git clone https://gitee.com/xwang987654/auto-reptile-system.git</code></pre>
      <pre><code>npm install</code></pre>
      <pre><code>npm run serve</code></pre>
      <p>在浏览器中访问 <a href="http://localhost:8080" target="_blank">http://localhost:8080</a></p>
    </section>

    <!-- FAQ Section -->
    <section class="faq">
      <h2>常见问题</h2>
      <el-collapse>
        <el-collapse-item title="为什么我看不到任何数据？">
          请检查您的网络连接，确保数据能够成功加载。如果问题仍然存在，请联系系统管理员。
        </el-collapse-item>
        <el-collapse-item title="如何查看特定年份的数据？">
          在发文量趋势图中，您可以选择年份范围来查看特定年份的数据。
        </el-collapse-item>
        <el-collapse-item title="如何导出数据？">
          您可以在“数据导出”选项中选择导出格式（如 CSV 或 Excel）进行下载。
        </el-collapse-item>
      </el-collapse>
    </section>

    <!-- Contact Section -->
    <section class="contact">
      <h2>联系方式</h2>
      <p>如果您在使用中遇到问题，不可以联系我们！</p>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      project: {
        name: '科技文献爬取系统',
        description: '该系统用于分析和可视化期刊的学术数据，帮助研究人员和管理人员更好地理解期刊的学术影响力和趋势。',
      },
      features: [
        '发文量趋势展示',
        '学科占比分析',
        '学者和机构分析',
        '关键词词云展示',
      ],
      systemRequirements: [
        '操作系统：Windows 10 / macOS / Linux',
        '浏览器：Chrome / Firefox / Edge',
        '需要互联网连接获取数据',
      ],
    };
  },
};
</script>

<style scoped>
/* Global Styles */
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background-color: #f4f4f4;
  color: #333;
}

h1, h2 {
  font-weight: bold;
  color: #2c3e50;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 15px;
  color: #3498db;
}

h2 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #2980b9;
}

p, ul, ol {
  font-size: 1.1rem;
  line-height: 1.6;
}

a {
  color: #409eff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Hero Section */
.hero {
  background-size: cover;
  background-position: center;
  padding: 80px 20px;
  text-align: center;
  color: white;
  border-bottom: 5px solid #3498db;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 20px;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 30px;
}

.cta-button {
  display: inline-block;
  padding: 15px 30px;
  background-color: #2980b9;
  color: white;
  border-radius: 5px;
  font-size: 1.2rem;
  text-decoration: none;
}

.cta-button:hover {
  background-color: #3498db;
}

/* Feature Cards Section */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.feature-card {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.feature-card p {
  font-size: 1rem;
  color: #7f8c8d;
}

/* Section Styles */
section {
  background-color: white;
  padding: 40px 20px;
  margin: 20px 0;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

section ul, section ol {
  margin-left: 20px;
}

pre {
  background-color: #f4f4f4;
  padding: 15px;
  border-radius: 4px;
  font-size: 1rem;
  margin-bottom: 20px;
  overflow-x: auto;
}

code {
  font-family: monospace;
  color: #e74c3c;
}

</style>
